<template>
  <el-dialog
    :visible.sync="innerVisible"
    :title="title"
    :width="width">
    <slot/>

    <slot slot="footer" name="footer"/>
  </el-dialog>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '1000px'
    }
  },
  data() {
    return {
      innerVisible: this.visible
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  }
}
</script>
